import { useRequest } from 'ahooks';
import { Button, Spin, Tabs } from 'antd';
import React, { useCallback, useState } from 'react';
import { Link } from 'react-router-dom';
import { getBannerListApi } from '../../../api/banner';
import BannerListTable from './components/BannerListTable';
import BannerSwiper from './components/BannerSwiper';

const { TabPane } = Tabs;
const AppBannerList = () => {
  // 控制切换tab
  const [activeKey, setKey] = useState('1')
  const handleKey = useCallback((key) => {
    setKey(key)
  }, [])
  // 获取数据
  const { data = [], loading, run: reGetBannerList } = useRequest(getBannerListApi)
  return (
    <Spin spinning={loading}>
      <Tabs activeKey={activeKey} onChange={handleKey} tabBarExtraContent={<Link to="/banner/upload"><Button type="primary">新增轮播图</Button></Link>}>
        <TabPane tab="table" key="1">
          <BannerListTable data={data} refresh={reGetBannerList} />
        </TabPane>
        <TabPane tab="swiper" key="2">
          <BannerSwiper data={data} />
        </TabPane>
      </Tabs>
    </Spin>
  )
}
export default AppBannerList
